<template>
  <div class="app-container user">
    <div class="search-container">
      <el-form
        :label-width="80"
        :inline="true"
        :model="queryForm"
      >
        <el-form-item label="姓名">
          <el-input v-model="queryForm.staff_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="queryForm.department_id" placeholder="请选择部门">
            <el-option label="信息中心" value="1" />
            <el-option label="研发中心" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="queryForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.status" placeholder="请选择状态">
            <el-option label="全部" value="0" />
            <el-option label="在职" value="1" />
            <el-option label="离职" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="search-btns">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>

    <div class="table-container">
      <div class="table-toolbar">
        <div class="table-toolbar-left">
          <el-button type="primary" @click="dialogShow('')">新增</el-button>
          <el-button type="danger">删除</el-button>
          <el-button :color="colorPink">导入</el-button>
          <el-button :color="colorPurple">导出</el-button>
        </div>
        <div class="table-toolbar-right"></div>
      </div>

      <div class="table-wrapper">
        <el-table v-loading="loading" :data="tableList">
          <el-table-column type="selection" align="center" />
          <el-table-column prop="staff_name" label="姓名" align="center" min-width="120px" />
          <el-table-column prop="department_name" label="部门" align="center" min-width="120px" />
          <el-table-column prop="status" label="状态" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.status === 1">在职</el-tag>
              <el-tag type="info" v-else>离职</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center" min-width="120px" />
          <el-table-column label="操作" align="center" width="150px">
            <template #default="{ row }">
              <div class="operation">
                <el-link type="primary" :underline="false" @click="dialogShow(row)">编辑</el-link>
                <el-link type="primary" :underline="false" @click="detailsShow(row)">详情</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination
        v-model:page="queryForm.page"
        v-model:pageSize="queryForm.pageSize"
        v-show="total > 0"
        :total="total"
        @pagination="initData"
      />
    </div>

    <dialog-form
      v-model="showDialogForm"
      :id="editId"
    />

    <drawer-details
      v-model="showDrawerDetails"
      :row="currentData"
    />
    <el-backtop :right="100" :bottom="100" :visibility-height="0" target=".el-scrollbar__view" />
  </div>
</template>

<script setup>
import user from '@/api/user'
import DialogForm from './dialogForm'
import DrawerDetails from './drawerDetails'
import { colorPink, colorPurple } from '@/assets/css/export.module.scss'

// 查询条件
const queryForm = reactive({
  staff_name: '',
  department_id: '',
  phone: '',
  status: '',
  page: 1,
  pageSize: 10
})

// 表格数据
const loading = ref(true)
const tableList = ref([])
const total = ref(0)

// 编辑id
const editId = ref('')

// 选中的数据
const currentData = ref(null)

// 初始化数据
const initData = () => {
  loading.value = true
  setTimeout(() => {
    tableList.value = user.list
    total.value = user.total
    loading.value = false
  }, 1000)
}

initData()

// dialog表单
const showDialogForm = ref(false)

// 显示dialog表单
const dialogShow = (row) => {
  editId.value = row.id
  showDialogForm.value = true
}

// 详情页面
const showDrawerDetails = ref(false)

// 显示详情页面
const detailsShow = (row) => {
  currentData.value = null
  showDrawerDetails.value = true
  currentData.value = row
}

</script>

<style lang="scss" scoped>
.user {
  padding: 15px;
}
</style>
